<template>
    <div>
        Error: Request failed with status code 404
        at createError (createError.js?f777:15)
        at settle (settle.js?199f:18)
        at XMLHttpRequest.handleLoad (xhr.js?14ed:77)
    </div>
</template>

<script>
    export default {
        name: "404"
    }
</script>

<style scoped>

</style>
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 实验室管理系统</el-breadcrumb-item>
                <el-breadcrumb-item></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-tabs type="border-card">
            <el-tab-pane label="所有申请信息">
                <div class="handle-box">
                    <el-button type="primary" icon="delete" class="handle-del mr10" >批量删除</el-button>
                    <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                    <el-button type="primary" icon="search" @click="search">搜索</el-button>
                </div>
                <el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
                    <el-table-column type="index" width="60"></el-table-column>
                    <el-table-column property="studentName" label="申请人"></el-table-column>
                    <el-table-column property="studentId" label="学号/学工号"></el-table-column>
                    <el-table-column property="startTime" label="开始时间"></el-table-column>
                    <el-table-column property="endTime" label="结束时间"></el-table-column>
                    <el-table-column property="useDemand" label="使用说明"></el-table-column>
                    <el-table-column property="useReason" label="使用原因"></el-table-column>
                    <el-table-column property="remark" label="备注"></el-table-column>
                    <el-table-column property="classroom" label="使用教室"></el-table-column>
                    <el-table-column property="applicationStatus" label="批示状态"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="150">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="danger"
                                @click="delOne(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageNum"
                    :page-size="8"
                    layout="prev, pager, next, jumper"
                    :total="count">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="未通过">
                <el-table :data="tableData1" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column property="studentName" label="申请人"></el-table-column>
                    <el-table-column property="studentId" label="学号/学工号"></el-table-column>
                    <el-table-column property="startTime" label="开始时间"></el-table-column>
                    <el-table-column property="endTime" label="结束时间"></el-table-column>
                    <el-table-column property="useDemand" label="使用说明"></el-table-column>
                    <el-table-column property="useReason" label="使用原因"></el-table-column>
                    <el-table-column property="remark" label="备注"></el-table-column>
                    <el-table-column property="classroom" label="使用教室"></el-table-column>
                    <el-table-column property="applicationStatus" label="批示状态"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="150px">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                @click="handleEdit(scope.$index, scope.row)">通过</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange1"
                    @current-change="handleCurrentChange1"
                    :current-page.sync="pageNum1"
                    :page-size="8"
                    layout="prev, pager, next, jumper"
                    :total="count1">
                </el-pagination>
                <el-dialog title="分配教室" :visible.sync="updateDogVis"  size="small">
                    <el-form :model="ruleForm1"  ref="ruleForm1" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="教室门牌号" prop="doorNumber">
                            <el-select  v-model="ruleForm1.doorNumber.door_number" placeholder="请选择实验室门牌号"  style="width: 98%">
                                <el-option v-for="item in ruleForm1.doorNumber" :key="item.door_number" :label="item.lab_name+'('+item.door_number+')'" :value="item.door_number"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="申请人" prop="studentId">
                            <el-input v-model="ruleForm.studentId" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="开始时间" prop="startTime">
                            <el-input v-model="ruleForm.startTime" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="结束时间" prop="endTime">
                            <el-input v-model="ruleForm.endTime" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="使用要求" prop="useDemand">
                            <el-input v-model="ruleForm.useDemand" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="使用原因" prop="useReason">
                            <el-input v-model="ruleForm.useReason" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="ruleForm.remark" disabled></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleupdata('ruleForm')">立即分配</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="已通过">
                <el-table ref="singleTable" :data="tableData2" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column property="studentName" label="申请人"></el-table-column>
                    <el-table-column property="studentId" label="学号/学工号"></el-table-column>
                    <el-table-column property="startTime" label="开始时间"></el-table-column>
                    <el-table-column property="endTime" label="结束时间"></el-table-column>
                    <el-table-column property="useDemand" label="使用说明"></el-table-column>
                    <el-table-column property="useReason" label="使用原因"></el-table-column>
                    <el-table-column property="remark" label="备注"></el-table-column>
                    <el-table-column property="classroom" label="使用教室"></el-table-column>
                    <el-table-column property="applicationStatus" label="批示状态"></el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page.sync="pageNum2"
                    :page-size="8"
                    layout="prev, pager, next, jumper"
                    :total="count2">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                tableData: [{
                    uuid:'',
                    studentName: '',
                    studentId:'',
                    startTime: '',
                    endTime: '',
                    useDemand: '',
                    useReason: '',
                    remark: '',
                    classroom:'',
                    applicationStatus: '',
                }],
                tableData1: [{
                    uuid:'',
                    studentName: '',
                    studentId:'',
                    startTime: '',
                    endTime: '',
                    useDemand: '',
                    useReason: '',
                    remark: '',
                    classroom:'',
                    applicationStatus: '',
                }],
                ruleForm: {
                    uuid:'',
                    studentName: '',
                    studentId:'',
                    startTime: '',
                    endTime: '',
                    useDemand: '',
                    useReason: '',
                    classroom:'',
                    remark: '',

                    applicationStatus: '',
                },
                ruleForm1:{
                    doorNumber:[{
                        door_number:'',
                        lab_name:'',
                    }],
                },
                rules: {
                    studentName: [
                        { required: true, message: '请输入实验室门牌号', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    studentId: [
                        { required: true, message: '请输入实验室名称', trigger: 'blur' },
                        {  max: 255, message: '已超过最大长度', trigger: 'blur' }
                    ],
                    startTime: [
                        { required: true, message: '请输入实验室管理员', trigger: 'blur' },
                        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                    ],
                    endTime: [
                        { required: true, message: '请输入管理员电话号码', trigger: 'blur' },
                        { min: 11, max: 11, message: '请输入正确的电话号码', trigger: 'blur' }
                    ],
                    useDemand: [
                        { required: true, message: '请输入实验室类型', trigger: 'blur' },
                        {  max: 255, message: '已超过最大长度', trigger: 'blur' }
                    ],
                    useReason: [
                        { required: true, message: '请输入实验室所属部门', trigger: 'blur' },
                        {  max: 255, message: '已超过最大长度', trigger: 'blur' }
                    ],
                    remark: [
                        { required: true, message: '请输入实验室电脑台数', trigger: 'blur' },
                        {  max: 255, message: '已超过最大长度', trigger: 'blur' }
                    ],
                    classroom: [
                        { required: true, message: '请输入可用电脑台数', trigger: 'blur' },
                        {  max: 255, message: '已超过最大长度', trigger: 'blur' }
                    ],
                    applicationStatus: [
                        { required: true, message: '请输入实验室介绍', trigger: 'blur' },
                        {  max: 255, message: '已超过最大长度', trigger: 'blur' }
                    ],
                },

                tableData2: [{
                    uuid:'',
                    studentName: '',
                    studentId:'',
                    startTime: '',
                    endTime: '',
                    useDemand: '',
                    useReason: '',
                    remark: '',
                    classroom:'',
                    applicationStatus: '',
                }],
                currentRow: null,
                select_word:'' ,
                select_word1:'' ,
                select_word2:'' ,
                updateDogVis:false,
                pageNum:0,
                pageNum1:0,
                pageNum2:0,
                count:1,
                count1:1,
                count2:1,
            }
        },
        created(){
            this.getData();
            this.getData1();
            this.getData2();
            this.getdoornumber()
        },

        methods: {
            getdoornumber(){
                this.$axios.get('/text/application/querydoornumber').then((res) => {
                    this.ruleForm1.doorNumber=res.data.data;
                    if(res.data.code==403){
                        this.$router.push('/login');
                    }
                })
            },
            getData(){
                this.page=true;
                this.$axios.get('text/application/query?pageNum=1').then((res) => {
                    if(res.data.code==403){
                        this.$router.push('/login');
                    }
                    this.tableData= res.data.data.list;
                    this.count=res.data.data.total;

                })
            },
            getData1(){
                this.page=true;
                this.$axios.get('text/application/query?pageNum=1').then((res) => {
                    if(res.data.code==403){
                        this.$router.push('/login');
                    }
                    this.tableData1= res.data.data.list;
                    this.count1=res.data.data.total;

                })
            },
            getData2(){
                this.page=true;
                this.$axios.get('text/application/query?pageNum=1'+'&').then((res) => {
                    if(res.data.code==403){
                        this.$router.push('/login');
                    }
                    this.tableData2= res.data.data.list;
                    this.count2=res.data.data.total;

                })
            },
            search(select_word){
                this.page=false;
                this.$axios.get('text/lab/application?pageNum=1'+'&doorNumber='+this.select_word).then((res) => {
                    this.tableData= res.data.data.list;
                    this.count1=res.data.data.total
                })
            },
            delOne(index, row) {
                this.$axios.delete('text/application/deletebyuuid?'+ 'uuid=' + row.uuid
                ).then((res) => {
                    this.getData();
                    this.getData1();
                    this.getData2();
                    this.$message.info('删除成功');
                })
            },
            handleEdit(index,row) {
                this.updateDogVis = true;
                this. ruleForm= row;
            },
            handleupdata(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.put('text/application/updata?' +
                            "uuid=" + this.ruleForm.uuid+
                            "&studentName=" + this.ruleForm.studentName+
                            "&studentId=" + this.ruleForm.studentId+
                            "&startTime=" + this.ruleForm.startTime+
                            "&endTime=" + this.ruleForm.endTime+
                            "&useDemand=" + this.ruleForm.useDemand+
                            "&useReason=" + this.ruleForm.useReason+
                            "&remark=" + this.ruleForm.remark+
                            "&classroom=" + this.ruleForm1.doorNumber.door_number+
                            "&applicationStatus=" + '已批准'
                        ).then((res) => {
                            this.getData();
                            this.getData1();
                            this.getData2();
                            console.log(res.data.code);
                            if(res.data.code==200)
                            {
                                this.$message({
                                    message: '教室分配成功！！',
                                    type: 'success'
                                });
                                this.updateDogVis = false;
                            }
                            else this.$message.error('教室分配失败!!!');
                            this.updateDogVis=false;
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            setCurrent(row) {
                this.$refs.singleTable.setCurrentRow(row);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(pageNum) {
                this.$axios.get('text/application/query?pageNum='+pageNum).then((res) => {
                    this.tableData= res.data.data.list;
                })
            },
            handleSizeChange1(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange1(pageNum1) {
                this.$axios.get('text/application/queryfuzzy?pageNum='+pageNum1+'&studentName='+ '待批准').then((res) => {
                    this.tableData1= res.data.data.list;
                })
            },
            handleSizeChange2(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange2(pageNum2) {
                this.$axios.get('text/application/queryfuzzy?pageNum='+pageNum2+'&studentName='+ '已批准').then((res) => {
                    this.tableData2= res.data.data.list;
                })
            },
        }
    }
</script>

<style>
    .handle-box{
        margin-bottom: 20px;
    }
    .handle-select{
        width: 120px;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
    }

    .block{
        float: right;
        margin-top: 20px;
    }
</style>
